<template>
  <view>
    <u-navbar placeholder :bgColor="navbarBgColor" auto-back>
      <template #center>
        <view class="w-270 flex gap-12">
          <view class="w-160">
            <u-search :show-action="false" bgColor="#fff"></u-search>
          </view>

          <view class="shop-card">
            <u-badge
              max="99"
              :value="1"
              absolute
              :offset="[-10, -10]"
            ></u-badge>
            <u-icon name="shopping-cart" size="24" color="#333"></u-icon>
          </view>
        </view>
      </template>
    </u-navbar>
    <z-paging
      ref="paging"
      v-model="list"
      @query="queryList"
      scrollable
      :height="'calc(100vh - ' + navBarHeight + ')'"
      :fixed="false"
      :auto-hide-loading-after-first-loaded="false"
      :use-page-scroll="false"
    >
      <!--    <scroll-view-->
      <!--      scroll-y="true"-->
      <!--      :style="{ height: 'calc(100vh - ' + navBarHeight + ')' }"-->
      <!--      @scrolltolower="scrolltolower"-->
      <!--    >-->
      <scroll-view
        scroll-x
        :style="{ width: '100vw' }"
        :scroll-into-view="'index' + current"
        scroll-with-animation
      >
        <view class="flex p-12 gap-12">
          <view
            v-for="(item, index) in 4"
            :id="'index' + index"
            :class="{ 'activity-tabs': true, currentTab: current === index }"
            @click="current = index"
          >
            <view class="text-nowrap">广东消费帮扶活动</view>
            <view class="flex justify-center pt-4">
              <u-icon name="map-fill" color="#fff" size="12"></u-icon>
              <view class="text-12">007</view>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="activity-content">
        <view class="flex items-center">
          <text class="text-20">333 ・</text>
          <view class="text-nowrap text-24 ellipsis-1">广东消费帮扶活动</view>
        </view>
        <view class="color-gray text-12 pt-10">
          2024.09.09 ・ 2天 | 2890张图片 | 0个视频
        </view>
        <view class="color-gray text-12 pt-10">
          2.04万人浏览 | 20.04万次浏览| 5680次下载
        </view>
        <scroll-view
          scroll-x
          :style="{ width: '100vw' }"
          :scroll-into-view="
            'currentType' + (currentType - 1 > 0 ? currentType - 1 : 0)
          "
          scroll-with-animation
        >
          <view
            :class="{
              'flex px-12 pt-12 gap-24': true,
              'color-primary': currentType === index,
            }"
          >
            <view
              class="text-center"
              v-for="(item, index) in 4"
              :key="index"
              :id="'currentType' + currentType"
            >
              <u-image
                width="100rpx"
                height="100rpx"
                shape="circle"
                :customStyle="{
                  boxShadow:
                    currentType === index
                      ? '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px #b5e1d4'
                      : 'none',
                }"
              ></u-image>
              <view class="mt-8 text-12">全部</view>
            </view>
          </view>
        </scroll-view>
      </view>

      <AlbumList :dataList="list" @handelImg="handelImg"></AlbumList>
      <!--    </scroll-view>-->
    </z-paging>
    <previewImage
      ref="previewImage"
      :opacity="1"
      :imgs="swiperImgList"
    ></previewImage>
  </view>
</template>

<script>
import AlbumList from "./albumList/index.vue";
import previewImage from "@/components/kxj-previewImage/kxj-previewImage.vue";
import { fetchGoodsOriginList } from "@/services/api";
export default {
  components: {
    AlbumList,
    previewImage,
  },
  data() {
    return {
      navbarBgColor: "transparent",
      swiperImgList: [],
      navBarHeight: "44px",
      current: 0,
      currentType: 0,
      list: [
        {
          imgUrl:
            "https://qxt-oss.yummall.cn/1762452183367946240/image/m0p0h5ux-yrry32z0z.jpg",
          imgList: [
            {
              imgUrl:
                "https://qxt-oss.yummall.cn/1762452183367946240/image/m0p0h5ux-yrry32z0z.jpg",
              downCount: 111,
              viewCount: 2,
            },
            {
              imgUrl:
                "https://qxt-oss.yummall.cn/1762452183367946240/image/m0p0h5ux-yrry32z0z.jpg",
              downCount: 111,
              viewCount: 2,
            },
          ],
        },
        {
          imgUrl:
            "https://qxt-oss.yummall.cn/1762452183367946240/image/m0oyxuxy-1kai3bkj9.jpg",
          imgList: [
            {
              imgUrl:
                "https://qxt-oss.yummall.cn/1762452183367946240/image/m0p0h5ux-yrry32z0z.jpg",
              downCount: 111,
              viewCount: 2,
            },
            {
              imgUrl:
                "https://qxt-oss.yummall.cn/1762452183367946240/image/m0p0h5ux-yrry32z0z.jpg",
              downCount: 111,
              viewCount: 2,
            },
          ],
        },
        {
          imgUrl:
            "https://qxt-oss.yummall.cn/1762452183367946240/image/m0f0nhxj-037p619oi.webp",
          imgList: [
            "https://qxt-oss.yummall.cn/1762452183367946240/image/m0p0h5ux-yrry32z0z.jpg",
            "https://qxt-oss.yummall.cn/1762452183367946240/image/m0oyxuxy-1kai3bkj9.jpg",
          ],
        },
        {
          imgUrl:
            "https://qxt-oss.yummall.cn/1762452183367946240/image/m0ai72lu-z8wki1r0f.jpg",
        },
        {
          imgUrl:
            "https://qxt-oss.yummall.cn/1762452183367946240/image/m0ai68uf-svr412c1q.jpg",
        },
        {
          imgUrl:
            "https://qxt-oss.yummall.cn/1762452183367946240/image/m067am7x-etyuprkya.jpg",
        },
        {
          imgUrl:
            "https://qxt-oss.yummall.cn/1762452183367946240/image/m024xmuc-iqo9hqh39.jpg",
        },
      ],
    };
  },
  methods: {
    handelImg(item) {
      this.swiperImgList = item.imgList;
      this.$refs.previewImage.open(0);
      // this.swiperShow = true;

      // uni.previewImage({
      //   current: item.imgList[0],
      //   urls: item.imgList,
      // });
    },

    getNavBarHeight() {
      this.navBarHeight = 44 + uni.$u.sys().statusBarHeight + "px";
    },
    //滚动到底部
    scrolltolower() {
      this.list.push({
        imgUrl:
          "https://qxt-oss.yummall.cn/1762452183367946240/image/m0p0h5ux-yrry32z0z.jpg",
        imgList: [
          {
            imgUrl:
              "https://qxt-oss.yummall.cn/1762452183367946240/image/m0p0h5ux-yrry32z0z.jpg",
            downCount: 111,
            viewCount: 2,
          },
          {
            imgUrl:
              "https://qxt-oss.yummall.cn/1762452183367946240/image/m0p0h5ux-yrry32z0z.jpg",
            downCount: 111,
            viewCount: 2,
          },
        ],
      });
    },
    async queryList(pageNum, pageSize) {
      const { data, error } = await fetchGoodsOriginList({
        pagination: { pageNum, pageSize },
      });
      if (!error) {
        this.$refs.paging?.complete(data);
      } else {
        this.$refs.paging?.complete(false);
      }
    },
  },
  onLoad() {
    this.getNavBarHeight();
  },
};
</script>

<style>
page {
  background: linear-gradient(to bottom, #d1f5f9, #f6f6f6);
}
</style>
<style lang="scss" scoped>
.swiper-box {
  height: 100vh;
  width: 100vw;
}
.preImgBottom {
  position: absolute;
  bottom: 0;
  height: 40px;
  background: red;
  width: 100%;
  z-index: 999;
}
.shop-card {
  position: relative;
  width: 72rpx;
  height: 72rpx;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.activity-tabs {
  padding: 24rpx;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #a3e4d3;
  font-size: 28rpx;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.currentTab {
  position: relative;
  font-size: 32rpx;
  background-color: #a3e4d3;
  color: #fff;
}
.currentTab:after {
  content: " ";
  width: 24rpx;
  height: 24rpx;
  background-color: #a3e4d3;
  border-radius: 4rpx;
  position: absolute;
  bottom: -12rpx;
  left: 50%;
  transform: rotate(45deg);
}
.activity-content {
  border-radius: 46rpx;
  padding: 24rpx;
  padding-top: 36rpx;
  background: white;
  overflow: hidden;
}
</style>
